<template>
  <view>
    <view class="tab">
      <u-tabs
        :list="list"
        lineWidth="40"
        lineHeight="2"
        :activeStyle="styleObj"
        @click="handleTab"
        :current="activeTab"
      ></u-tabs>
    </view>
    <view class="list">
      <view class="item" v-for="items in todeList" :key="items.id">
        <template v-if="items.state == 0 && activeTab == 0">
          <view class="title flex-row justify-between">
            <text>{{ items.start_time }} 操作人：{{ items.c_name }}</text>
            <button @tap="finshedTodo(items)">完成待办</button>
          </view>
          <view>协作人：{{ items.worker_name }}</view>
          <view class="content">
            <TextOverflow
              :line="2"
              :dt="items.remark"
              expandText="...展开"
              foldHint="收起"
            />
            <view class="imgs" v-if="items.file_url">
              <image
                v-for="(child, idx) in items.file_url"
                :key="idx"
                :src="child"
                mode=""
              />
            </view>
          </view>
        </template>
        <template v-if="items.state == 1 && activeTab == 1">
          <view class="title flex-row justify-between">
            <text>{{ items.start_time }} 操作人：{{ items.c_name }}</text>
            <button>已处理</button>
          </view>
          <view>协作人：{{ items.worker_name }}</view>
          <view class="content">
            <TextOverflow
              :line="2"
              :dt="items.todo_remark"
              expandText="...展开"
              foldHint="收起"
            />
            <view class="imgs" v-if="items.complete_file_url">
              <image
                v-for="(child, idx) in items.complete_file_url"
                :key="idx"
                :src="child"
                mode=""
              />
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>
<script>
import TextOverflow from '@/components/text-over-flow/text-over-flow.vue'
import { getTodoList } from '@/config/api'
export default {
  components: {
    TextOverflow,
  },
  data() {
    return {
      styleObj: { color: '#159EEC' },
      list: [
        {
          name: '未处理',
        },
        {
          name: '已处理',
        },
      ],
      activeTab: 0,
      todeList: [],
      hasMore: true,
      page: 1,
      size: 10,
    }
  },
  onLoad() {
    this.getTodoListData()
  },

  methods: {
    onBackPress(e) {
      console.log(e)
      // uni.redirectTo({
      //   url: '/pages/client/index',
      // })
      uni.navigateTo({
        url: '/pages/client/index',
      })
      return true
    },
    finshedTodo(item) {
      uni.navigateTo({
        url: '/pages/base/finshedTodo?id=' + item.id,
      })
    },
    async getTodoListData() {
      const res = await getTodoList({
        state: this.activeTab,
        userid:
          uni.getStorageSync('clientId') || 'wm5m8oBwAAbnpzp42PG25sOmKS7EUQ0g',
        fl_userid: uni.getStorageSync('UserId') || 'toney@ikedongli.com',
        size: this.size,
        page: this.page,
      })
      if (res.data.length < this.size) {
        this.hasMore = false
      }
      res.data = res.data.map((item) => {
        item.start_time = item.start_time.split(' ')[0]
        return item
      })
      this.todeList = [...this.todeList, ...res.data]
      console.log(this.todeList)
    },
    handleTab(e) {
      this.activeTab = e.index
      this.current = 1
      this.hasMore = true
      this.page = 1
      this.todeList = []
      this.getTodoListData()
    },
    onReachBottom() {
      if (!this.hasMore) {
        return
      }
      this.page++
      this.getTodoListData()
    },
  },
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
/deep/ .u-tabs__wrapper__nav__item {
  height: 70rpx !important;
}
.list {
  padding: 28rpx;
  .item::before {
    content: '';
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #9999a5;
    position: absolute;
    left: -40rpx;
    top: 15rpx;
  }
  .item::after {
    content: '';
    display: inline-block;
    width: 2rpx;
    height: 100%;
    background: #9999a5;
    position: absolute;
    left: -37rpx;
    top: 15rpx;
  }
  .item {
    position: relative;
    width: calc(100% - 40rpx);
    margin-left: 40rpx;
    padding-bottom: 40rpx;
    .title {
      color: #9999a5;
      button {
        margin: 0;
        padding: 0;
        font-size: 24rpx;
        width: 120rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #159eec;
        &::after {
          border-color: #159eec;
          border-width: 2rpx;
          border-radius: 50rpx;
        }
      }
    }
    .content {
      background: #f6f6f7;
      border-radius: 8rpx;
      padding: 16rpx;
      margin-top: 8rpx;
      .imgs {
        image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 12rpx;
          margin-top: 12rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
}
</style>
